<template>
  <div id="home">
    <div class="tabbar">
      <div :class="{active:item.active}" v-for="item in tabs" :key="item.id">
        <a @click="$router.push(item.url)"><span>{{item.name}}</span></a>
      </div>
    </div>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      tabIndex:0,
      tabs:[
        {id:0,name:'个性推荐',url:'/home/recommend',active:false},
        {id:1,name:'歌单',url:'/home/songlist',active:false},
        {id:2,name:'排行榜',url:'/home/top',active:false},
        {id:3,name:'最新音乐',url:'/home/newsongs',active:false},
      ]
    }
  },
  methods:{
    changeTab(url){
      this.$router.push(url)
    }
  },
  watch:{
    // 当路径切换时，修改active属性
    '$route.path':{
      immediate:true,
      handler(){
        console.log(this.$route.path)
        this.tabs.forEach(item=>{
          if(item.url == this.$route.path){
            item.active = true
          }else{
            item.active = false
          }
        })
      }
    }
  }
};
</script>

<style lang='less'>
@media screen and (max-width: 2200px) {
  #home {
    width: 1100px;
  }
}

@media screen and (max-width: 1438px) {
  #home {
    width: 800px;
  }
}
#home {
  padding: 0 30px;
  margin: 0 auto;
  .tabbar {
    display: flex;
    div {
      cursor: pointer;
      margin-right: 20px;
      font-size: 18px;
    }
    .active {
      font-size: 18px;
      font-weight: bolder;
      border-bottom: 3px solid rgb(113, 127, 249);
    }
  }
}
</style>